<!--<template>-->
<!--  <div class="upload-container">-->
<!--    <div class="upload-header">-->
<!--      <h2>非遗技术上传</h2>-->
<!--      <p>请填写您的非遗技术信息，提交后管理员将进行审核</p>-->
<!--    </div>-->

<!--    <el-form-->
<!--        ref="formRef"-->
<!--        :model="form"-->
<!--        :rules="rules"-->
<!--        label-width="120px"-->
<!--        class="upload-form"-->
<!--    >-->
<!--      <el-form-item label="技术标题" prop="title">-->
<!--        <el-input v-model="form.title" placeholder="请输入技术标题" />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="技术类型" prop="type">-->
<!--        <el-select v-model="form.type" placeholder="请选择技术类型">-->
<!--          <el-option-->
<!--              v-for="item in techTypes"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="技术分类" prop="category">-->
<!--        <el-cascader-->
<!--            v-model="form.category"-->
<!--            :options="categories"-->
<!--            placeholder="请选择技术分类"-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="技术描述" prop="description">-->
<!--        <el-input-->
<!--            v-model="form.description"-->
<!--            type="textarea"-->
<!--            :rows="5"-->
<!--            placeholder="请详细描述您的技术特点、历史渊源等信息"-->
<!--        />-->
<!--      </el-form-item>-->

<!--      <el-form-item label="上传材料" prop="materials">-->
<!--        <el-upload-->
<!--            action="#"-->
<!--            list-type="picture-card"-->
<!--            :file-list="fileList"-->
<!--            :auto-upload="false"-->
<!--            :on-change="handleFileChange"-->
<!--            :on-remove="handleRemove"-->
<!--            multiple-->
<!--        >-->
<!--          <el-icon><Plus /></el-icon>-->
<!--        </el-upload>-->
<!--        <div class="upload-tip">可上传图片或视频，单个文件不超过50MB</div>-->
<!--      </el-form-item>-->

<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="submitForm">提交审核</el-button>-->
<!--        <el-button @click="resetForm">重置</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    <el-dialog v-model="dialogVisible" title="提交成功" width="30%">-->
<!--      <span>您的技术已提交审核，请等待管理员审核通过</span>-->
<!--      <template #footer>-->
<!--        <el-button type="primary" @click="dialogVisible = false">确定</el-button>-->
<!--      </template>-->
<!--    </el-dialog>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, reactive } from 'vue'-->
<!--import { Plus } from '@element-plus/icons-vue'-->
<!--import { ElMessage } from 'element-plus'-->
<!--import { submitTech } from '@/api/techApi'-->

<!--// 表单数据-->
<!--const form = reactive({-->
<!--  title: '',-->
<!--  type: '',-->
<!--  category: [],-->
<!--  description: '',-->
<!--  materials: []-->
<!--})-->

<!--// 文件列表-->
<!--const fileList = ref([])-->

<!--// 表单验证规则-->
<!--const rules = reactive({-->
<!--  title: [-->
<!--    { required: true, message: '请输入技术标题', trigger: 'blur' },-->
<!--    { min: 5, max: 50, message: '长度在5到50个字符', trigger: 'blur' }-->
<!--  ],-->
<!--  type: [-->
<!--    { required: true, message: '请选择技术类型', trigger: 'change' }-->
<!--  ],-->
<!--  category: [-->
<!--    { required: true, message: '请选择技术分类', trigger: 'change' }-->
<!--  ],-->
<!--  description: [-->
<!--    { required: true, message: '请输入技术描述', trigger: 'blur' },-->
<!--    { min: 20, message: '至少输入20个字符', trigger: 'blur' }-->
<!--  ]-->
<!--})-->

<!--// 技术类型选项-->
<!--const techTypes = [-->
<!--  { value: 'video', label: '视频教程' },-->
<!--  { value: 'photo', label: '图片教程' },-->
<!--  { value: 'document', label: '文字资料' },-->
<!--  { value: 'audio', label: '音频资料' }-->
<!--]-->

<!--// 技术分类选项-->
<!--const categories = [-->
<!--  {-->
<!--    value: 'folk-literature',-->
<!--    label: '民间文学',-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '传统音乐'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '传统舞蹈'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '传统戏剧'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '曲艺'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '传统体育'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '游艺与杂技'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '传统美术'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '传统技艺'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '传统医药'-->
<!--  },-->
<!--  {-->
<!--    value: 'traditional-music',-->
<!--    label: '民俗民俗'-->
<!--  },-->

<!--  // 其他分类...-->
<!--]-->

<!--// 文件变化处理-->
<!--const handleFileChange = (file, files) => {-->
<!--  if (file.size > 50 * 1024 * 1024) {-->
<!--    ElMessage.error('文件大小不能超过50MB')-->
<!--    return false-->
<!--  }-->
<!--  fileList.value = files-->
<!--}-->

<!--// 文件移除处理-->
<!--const handleRemove = (file, files) => {-->
<!--  fileList.value = files-->
<!--}-->

<!--// 提交表单-->
<!--const submitForm = async () => {-->
<!--  try {-->
<!--    // 验证表单-->
<!--    await formRef.value.validate()-->

<!--    // 准备提交数据-->
<!--    const formData = new FormData()-->
<!--    formData.append('title', form.title)-->
<!--    formData.append('type', form.type)-->
<!--    formData.append('category', form.category.join(','))-->
<!--    formData.append('description', form.description)-->

<!--    // 添加文件-->
<!--    fileList.value.forEach(file => {-->
<!--      formData.append('materials', file.raw)-->
<!--    })-->

<!--    // 调用API-->
<!--    await submitTech(formData)-->

<!--    // 显示成功消息-->
<!--    dialogVisible.value = true-->
<!--    resetForm()-->

<!--  } catch (error) {-->
<!--    console.error('提交失败:', error)-->
<!--    if (error !== 'validate') {-->
<!--      ElMessage.error('提交失败，请稍后重试')-->
<!--    }-->
<!--  }-->
<!--}-->

<!--// 重置表单-->
<!--const resetForm = () => {-->
<!--  formRef.value.resetFields()-->
<!--  fileList.value = []-->
<!--}-->

<!--const formRef = ref(null)-->
<!--const dialogVisible = ref(false)-->
<!--</script>-->

<!--<style scoped>-->
<!--.upload-container {-->
<!--  max-width: 1000px;-->
<!--  margin: 0 auto;-->
<!--  padding: 60px 20px;-->
<!--}-->

<!--.upload-header {-->
<!--  text-align: center;-->
<!--  margin-bottom: 40px;-->
<!--}-->

<!--.upload-header h2 {-->
<!--  font-size: 24px;-->
<!--  color: #3a7d00;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.upload-header p {-->
<!--  color: #666;-->
<!--}-->

<!--.upload-form {-->
<!--  background: #fff;-->
<!--  padding: 30px;-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.upload-tip {-->
<!--  font-size: 12px;-->
<!--  color: #999;-->
<!--  margin-top: 8px;-->
<!--}-->
<!--</style>-->
<template>
  <div class="upload-container">
    <el-dialog
        v-model="uploadDialogVisible"
        title="上传非遗项目"
        width="70%"
    >
      <el-form
          ref="uploadFormRef"
          :model="uploadForm"
          :rules="rules"
          label-width="120px"
          class="upload-form"
      >
        <el-form-item label="技术标题" prop="title">
          <el-input v-model="uploadForm.title" placeholder="请输入技术标题" />
        </el-form-item>

        <el-form-item label="技术类型" prop="type">
          <el-select v-model="uploadForm.type" placeholder="请选择技术类型">
            <el-option
                v-for="item in techTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="技术分类" prop="category">
          <el-cascader
              v-model="uploadForm.category"
              :options="categories"
              placeholder="请选择技术分类"
          />
        </el-form-item>

        <el-form-item label="技术描述" prop="description">
          <el-input
              v-model="uploadForm.description"
              type="textarea"
              :rows="5"
              placeholder="请详细描述您的技术特点、历史渊源等信息"
          />
        </el-form-item>

        <el-form-item label="上传材料" prop="materials">
          <el-upload
              action="#"
              list-type="picture-card"
              :file-list="uploadFileList"
              :auto-upload="false"
              :on-change="handleFileChange"
              :on-remove="handleRemove"
              multiple
              accept="image/*,video/*"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <div class="upload-tip">可上传图片或视频，单个文件不超过50MB</div>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUploadForm">提交审核</el-button>
      </template>
    </el-dialog>

    <div class="upload-header">
      <h2>我的非遗项目</h2>
      <el-button
          type="primary"
          size="small"
          @click="openUploadDialog"
          style="margin-left: 10px"
      >
        <el-icon><Plus /></el-icon>
        <span>上传新项目</span>
      </el-button>
    </div>

    <div class="upload-filter">
      <el-select v-model="filter.status" placeholder="审核状态" clearable>
        <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>

      <el-select v-model="filter.category" placeholder="技术分类" clearable>
        <el-option
            v-for="item in categoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>

      <el-input
          v-model="filter.keyword"
          placeholder="搜索标题"
          clearable
          style="width: 250px"
      >
        <template #append>
          <el-button :icon="Search" @click="fetchUploadData" />
        </template>
      </el-input>
    </div>

    <el-table
        :data="uploadTableData"
        style="width: 100%"
        border
        v-loading="uploadLoading"
    >
      <el-table-column prop="id" label="ID" width="120" />
      <el-table-column prop="userName" label="传承人" width="150" />
      <el-table-column prop="title" label="技术标题" width="250" />
      <el-table-column prop="category" label="分类" width="150" />
      <el-table-column prop="type" label="类型" width="120">
        <template #default="{ row }">
          <el-tag :type="getTypeTag(row.type)">{{
              getTypeName(row.type)
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusTag(row.status)">{{
              getStatusName(row.status)
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="246" />
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="viewUploadDetail(row)">查看</el-button>
          <el-button
              size="small"
              type="danger"
              @click="deleteUpload(row.id)"
              v-if="row.status === 'rejected' || row.status === 'approved'"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="fetchUploadData"
          @size-change="fetchUploadData"
      />
    </div>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailVisible" title="项目详情" width="70%">
      <div v-if="currentUpload" class="tech-detail">
        <h3>{{ currentUpload.title }}</h3>
        <div class="meta-info">
          <span>分类: {{ currentUpload.category }}</span>
          <span>类型: {{ getTypeName(currentUpload.type) }}</span>
          <span>状态: <el-tag :type="getStatusTag(currentUpload.status)">{{
              getStatusName(currentUpload.status)
            }}</el-tag></span>
        </div>

        <div class="description">
          <h4>技术描述</h4>
          <p>{{ currentUpload.description }}</p>
        </div>

        <div class="materials">
          <h4>上传材料</h4>
          <div class="material-list">
            <div
                v-for="(item, index) in currentUpload.materials"
                :key="index"
                class="material-item"
            >
              <div v-if="isImage(item.url)" class="image-container">
                <el-image
                    :src="item.url"
                    :preview-src-list="
                    currentUpload.materials
                      .filter((m) => isImage(m.url))
                      .map((m) => m.url)
                  "
                    fit="cover"
                />
              </div>
              <div v-else-if="isVideo(item.url)" class="video-container">
                <video controls>
                  <source :src="item.url" type="video/mp4" />
                  您的浏览器不支持视频播放
                </video>
              </div>
              <div v-else class="file-container">
                <el-icon><Document /></el-icon>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <el-button @click="detailVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus, Search, Document } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  getUserUploadedList,
  getUserUploadDetail,
  deleteUpload
} from '@/api/uploadApi'

// 上传弹窗
const uploadDialogVisible = ref(false)
const uploadFormRef = ref(null)
const uploadForm = reactive({
  title: '',
  type: '',
  category: [],
  description: '',
  materials: []
})

// 文件列表
const uploadFileList = ref([])

// 表单验证规则
const rules = reactive({
  title: [
    { required: true, message: '请输入技术标题', trigger: 'blur' },
    { min: 5, max: 50, message: '长度在5到50个字符', trigger: 'blur' }
  ],
  type: [{ required: true, message: '请选择技术类型', trigger: 'change' }],
  category: [{ required: true, message: '请选择技术分类', trigger: 'change' }],
  description: [
    { required: true, message: '请输入技术描述', trigger: 'blur' },
    { min: 20, message: '至少输入20个字符', trigger: 'blur' }
  ],
  materials: [{ required: true, message: '请上传至少一个文件', trigger: 'blur' }]
})

// 技术类型选项
const techTypes = [
  { value: 'video', label: '视频' },
  { value: 'photo', label: '图片' },
  { value: 'document', label: '文档' },
  { value: 'audio', label: '音频' }
]

// 技术分类选项
const categories = [
  { value: 'folk-literature', label: '民间文学' },
  { value: 'traditional-music', label: '传统音乐' },
  { value: 'traditional-dance', label: '传统舞蹈' },
  { value: 'traditional-drama', label: '传统戏剧' },
  { value: 'quyi', label: '曲艺' },
  { value: 'traditional-sports', label: '传统体育' },
  { value: 'entertainment-acrobatics', label: '游艺与杂技' },
  { value: 'traditional-art', label: '传统美术' },
  { value: 'traditional-craft', label: '传统技艺' },
  { value: 'traditional-medicine', label: '传统医药' },
  { value: 'folk-customs', label: '民俗民俗' }
]

// 状态选项
const statusOptions = [
  { value: 'pending', label: '审核中' },
  { value: 'approved', label: '已通过' },
  { value: 'rejected', label: '未通过' }
]

// 筛选条件
const filter = reactive({
  status: '',
  category: '',
  keyword: ''
})

// 分页
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 获取上传数据
const uploadTableData = ref([])
const uploadLoading = ref(false)

const fetchUploadData = async () => {
  try {
    uploadLoading.value = true
    const params = {
      page: pagination.current,
      size: pagination.size,
      ...filter
    }
    const res = await getUserUploadedList(params)
    uploadTableData.value = res.data.list
    pagination.total = res.data.total
  } catch (error) {
    console.error('获取上传数据失败:', error)
  } finally {
    uploadLoading.value = false
  }
}

// 查看上传详情
const currentUpload = ref(null)
const detailVisible = ref(false)

const viewUploadDetail = async (row) => {
  try {
    const res = await getUserUploadDetail(row.id)
    currentUpload.value = res.data
    detailVisible.value = true
  } catch (error) {
    console.error('获取上传详情失败:', error)
  }
}

// 删除上传项目
const deleteUploadItem = (id) => {
  ElMessageBox.confirm(
      '确定要删除该项目吗？此操作不可撤销。',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  )
      .then(async () => {
        try {
          await deleteUpload(id)
          ElMessage.success('删除成功')
          fetchUploadData()
        } catch (error) {
          ElMessage.error('删除失败，请稍后重试')
        }
      })
      .catch(() => {})
}

// 文件变化处理
const handleFileChange = (file, files) => {
  if (file.size > 50 * 1024 * 1024) {
    ElMessage.error('文件大小不能超过50MB')
    return false
  }
  uploadFileList.value = files
}

// 文件移除处理
const handleRemove = (file, files) => {
  uploadFileList.value = files
}

// 提交上传表单
const submitUploadForm = async () => {
  try {
    await uploadFormRef.value.validate()

    // 准备提交数据
    const formData = new FormData()
    formData.append('title', uploadForm.title)
    formData.append('type', uploadForm.type)
    formData.append('category', uploadForm.category.join(','))
    formData.append('description', uploadForm.description)

    // 添加文件
    uploadFileList.value.forEach((file) => {
      formData.append('materials', file.raw)
    })

    // 这里可以调用API提交表单
    // await submitUpload(formData)

    ElMessage.success('提交成功，等待审核')
    uploadDialogVisible.value = false
    await fetchUploadData()

  } catch (error) {
    console.error('提交失败:', error)
    if (error !== 'validate') {
      ElMessage.error('提交失败，请稍后重试')
    }
  }
}

// 重置上传表单
const resetUploadForm = () => {
  uploadFormRef.value.resetFields()
  uploadFileList.value = []
}

// 打开上传弹窗
const openUploadDialog = () => {
  uploadDialogVisible.value = true
}

// 辅助方法
const getTypeName = (type) => {
  const types = {
    video: '视频',
    photo: '图片',
    document: '文档',
    audio: '音频'
  }
  return types[type] || type
}

const getTypeTag = (type) => {
  const tags = {
    video: 'primary',
    photo: 'success',
    document: 'warning',
    audio: 'info'
  }
  return tags[type] || ''
}

const getStatusName = (status) => {
  const statusMap = {
    pending: '审核中',
    approved: '已通过',
    rejected: '未通过'
  }
  return statusMap[status] || status
}

const getStatusTag = (status) => {
  const tags = {
    pending: 'warning',
    approved: 'success',
    rejected: 'danger'
  }
  return tags[status] || ''
}

const isImage = (url) => {
  return /\.(jpg|jpeg|png|gif|webp)$/i.test(url)
}

const isVideo = (url) => {
  return /\.(mp4|webm|ogg)$/i.test(url)
}

onMounted(() => {
  fetchUploadData()
})
</script>

<style scoped>
.upload-container {
  padding: 60px;
}

.upload-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.upload-header h2 {
  margin: 0;
  font-size: 24px;
  color: #3a7d00;
}

.upload-filter {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.tech-detail h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
}

.meta-info {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

.description {
  margin-bottom: 30px;
}

.description h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.description p {
  line-height: 1.8;
  color: #555;
}

.materials h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
}

.material-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.material-item {
  border: 1px solid #eee;
  border-radius: 4px;
  overflow: hidden;
}

.image-container {
  height: 150px;
}

.video-container {
  height: 150px;
  background: #000;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.file-container {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
}
</style>